<template>
  <div class="w100 h100">
    <vxeTB @getData="getData" :hidepage="hidepage" :hideexport="hideexport" :hidesetting="hidesetting"
      :showradio="showradio" :showcheck="showcheck" :hidequery="options.queryList.querys.length===0"
      :pageconfig="state.pageconfig" @query='query' :queryList="options.queryList.querys"
      :tabList="options.tabList" @pagechange="pagechange" class="w100 h100" @yinyong="yinyong"
      :tabledata="state.tabledata" :tableheads="options.tableheads" :subtableheads="options.subtableheads" :export-url="options.exportUrl"
      :import-url="options.importUrl" :data-url="options.dataUrl" :echarts-url="options.echartsUrl"
      :loading="state.loading" :pageName="pageName" :tabName="tabName"
      :expandFixed="options.expandFixed" :isShowCaozuo="options.isShowCaozuo"  @tabChange="tabChange"
       ref="vxe">
      <template v-slot:selectName>
        <slot name="selectName1"></slot>
      </template>
      <template v-slot:content="row">
        <slot name="expandFixed" :row="row"></slot>
      </template>
      <template v-slot:opraCurdBtnAll>
        <slot name="opraCurdBtnAll"></slot>
      </template>
      <template v-slot:opraCurdBtn="row">
        <slot name="opraCurdBtn1" :row="row"></slot>
      </template>
    </vxeTB>
  </div>
</template>
<script>
  import vxeTB from "./vxeTB"
  import querybox from "./querybox"
  import {
    onMounted,
    reactive,
    computed,
    nextTick,
    ref,
    onUnmounted
  } from "vue";
  import axios from "@/utils/request";
  import dayjs from "dayjs";
  import {
    ElMessage,
    ElMessageBox,
    ElNotification
  } from "element-plus";
  import {
    useRouter
  } from "vue-router";
  import {
    useStore
  } from "vuex";
  import _ from 'lodash'
  import * as echarts from 'echarts'
  import * as charts_config from "@/assets/charts_config/charts_config";

  export default {
    props: {
      pId: {
        default: () => '',
        type: String
      },
      cid: {
        default: () => '',
        type: String
      },
      pageName: {
        default: () => '',
        type: String
      },
      tabName: {
        default: () => '',
        type: String
      },
    
      showradio: {
        default: () => false,
        type: Boolean
      },
      showcheck: {
        default: () => false,
        type: Boolean
      },
      hidepage: {
        default: () => false,
        type: Boolean
      },
      showduoyulan: {
        default: () => false,
        type: Boolean
      },
      hideexport: {
        default: () => false,
        type: Boolean
      },
      hidesetting: {
        default: () => false,
        type: Boolean
      },
      options: {
        type: Object,
        default: () => {
          return {
            tableheads: [],
            queryList: {
              //下拉接口
              dropdownUrl: '',
              //select需要加options
              querys: [],
              //查询关键字-下拉列表 映射关系
              queryMap: new Map()
            },
            // 数据接口
            dataUrl: '',
          }
        }
      },
      dataHandle: {
        type: Function,
        default: i => i
      }
    },
    components: {
      vxeTB,
      querybox
    },
    setup({
      options,
      dataHandle,
      pId,
      cid
    }, {
      emit,
      props
    }) {
      let itv = null
      let vxe = ref(null)
      const store = useStore()
      const router = useRouter()
      let state = reactive({
        loading: false,
        tabledata: [],
        pageconfig: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
        },
        leftSelectVlaue: {},
        records: []
      })
      let heads_filter = computed(() => {
        return options.tableheads.filter((item) => {
          return !item.disabled
        })
      })
      let select_count = computed(() => {
        let count = 0
        options.queryList.querys.forEach((item) => {
          if (item.type === 'select' || item.type === 'cascader' || item.type ===
            'multiple_select' || item.type === 'select_label') {
            count++
          }
        })
        return count
      })

      function pagechange(e) {
        state.pageconfig.currentPage = e.currentPage
        state.pageconfig.pageSize = e.pageSize
        getData()
      }

      function query() {
        state.pageconfig.currentPage = 1
        state.pageconfig.pageSize = 10
        getData()
      }

      function getData() {
        state.loading = true
        let postOBJ = {}
        let querykeywords = {}
        let isError = false
        options.queryList.querys.forEach((item) => {
          querykeywords[item.field] = item.binddata
          if (item.binddata && item.field === 'durationTime') {
            querykeywords.queryStartTime = dayjs(item.binddata[0]).format('YYYY-MM-DD HH:mm:ss')
            querykeywords.queryEndTime = dayjs(item.binddata[1]).format('YYYY-MM-DD HH:mm:ss')
          delete querykeywords.durationTime
          }
        })
         
        if (!isError) {
          if(pId != ''){
            querykeywords.primaryIndexId = pId*1
            if(cid != ''){
              querykeywords.childIndexId = cid*1
            }
          }
          postOBJ = {
            ...querykeywords,
            pageNum: state.pageconfig.currentPage,
            pageSize: state.pageconfig.pageSize,
          }
          axios.post(options.dataUrl, postOBJ).then((res) => {
            if (res.code == 200) {
              state.loading = false
              // state.tabledata = dataHandle(res.data.list)
              // state.pageconfig.total = res.data.total
              state.tabledata = dataHandle(res.rows)
              state.pageconfig.total = res.total

              // state.pageconfig.total = res.rows.length
              // console.log(state.tabledata,'state.tabledata')
            }
          }).catch(() => {
            state.loading = false
          })
        }
      }

      function getOptions() {
        if (options.queryList.dropdownUrl != '') {
          axios.post(options.queryList.dropdownUrl, {
            conditions: [...options.queryList.queryMap.values()]
          }).then((res) => {
            options.queryList.queryMap.forEach((item, key) => {
              options.queryList.querys.forEach((item2) => {
                if (item2.field === key) {
                  if (item2.type === 'select' || item2.type ===
                    'multiple_select' || item2.type === 'select_label' ||
                    item2.type === 'select_value') {
                    if (res.data[item]) {
                      item2.options = res.data[item].map((item3) => {
                        return {
                          label: item3.dictLabel,
                          value: item3.dictValue
                        }
                      })
                    }
                  }
                  if (item2.type === 'cascader') {
                    item2.options = res.data[item]
                  }
                }
              })
            })
          })
        }
      }


      function tabChange(row) {
        emit('tabChange', row)
        state.pageconfig.currentPage=1
      }
      function yinyong(row) {
        emit('yinyong', row)
      }
      onMounted(() => {
        if (options.queryList.autoSearch) {
          return
        } else {
          getData()
        }
        if (options.queryList.shishiType == true) {
          itv = setInterval(() => {
            getData()
          }, 60000)
        } else {
          clearInterval(itv)
        }
      })
      onUnmounted(() => {
        clearInterval(itv)
      })
      return {
        // query,
        state,
        // pagechange,
        // getData,
        store,
        vxe,
        heads_filter,
        tabChange,
        props,
        yinyong
      }
    },
    methods: {
      //  pagechange(e) {
      //   this.state.pageconfig.currentPage = e.currentPage
      //   this.state.pageconfig.pageSize = e.pageSize
      //   this.getData()
      // },
      // query() {
      //   this.state.pageconfig.currentPage = 1
      //   this.state.pageconfig.pageSize = 10
      //   this.getData()
      // },
       getData() {
        state.loading = true
        let postOBJ = {}
        let querykeywords = {}
        let isError = false
        options.queryList.querys.forEach((item) => {
          querykeywords[item.field] = item.binddata
          if (item.binddata && item.field === 'durationTime') {
            querykeywords.queryStartTime = dayjs(item.binddata[0]).format('YYYY-MM-DD HH:mm:ss')
            querykeywords.queryEndTime = dayjs(item.binddata[1]).format('YYYY-MM-DD HH:mm:ss')
          delete querykeywords.durationTime
          }
        })
         
        if (!isError) {
          if(pId != ''){
            querykeywords.primaryIndexId = pId*1
            if(cid != ''){
              querykeywords.childIndexId = cid*1
            }
          }
          postOBJ = {
            ...querykeywords,
            pageNum: state.pageconfig.currentPage,
            pageSize: state.pageconfig.pageSize,
          }
          axios.post(options.dataUrl, postOBJ).then((res) => {
            if (res.code == 200) {
              state.loading = false
              // state.tabledata = dataHandle(res.data.list)
              // state.pageconfig.total = res.data.total
              state.tabledata = dataHandle(res.rows)
              state.pageconfig.total = res.total

              // state.pageconfig.total = res.rows.length
              // console.log(state.tabledata,'state.tabledata')
            }
          }).catch(() => {
            state.loading = false
          })
        }
      }
    },
  }
</script>
<style lang="scss">
  .pageName {
    padding: 10px 0 0 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
  }

  .formstyle {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
  }

  .el-select__tags {
    span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .topleft {
    margin-top: 20px;
    margin-left: 20px
  }
</style>